<template>
  <page-header-wrapper :title="false">
    <a-card
      title="排班设置"
    >
<!--      <div class="table-page-search-wrapper">-->
<!--        <a-form-model :model="queryParam" layout="inline">-->
<!--          <a-row :gutter="10">-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-model-item label="顾问姓名">-->
<!--                <a-select-->
<!--                  show-search-->
<!--                  v-model="queryParam['uid']"-->
<!--                  placeholder="选择顾问姓名"-->
<!--                  :filter-option="filterOption"-->
<!--                >-->
<!--                  <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <span class="table-page-search-submitButtons">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--              </span>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-model>-->
<!--      </div>-->
      <div style="margin-bottom: 16px">
        <a-button :disabled="selectedRowKeys.length == 0" size="small" type="primary" @click="batchSet">批量设置</a-button>
        <span style="margin-left: 8px">
          <template v-if="selectedRowKeys.length != 0">
            {{ `已选中 ${selectedRowKeys.length} 个顾问` }}
          </template>
        </span>
      </div>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.uid"
        :columns="userColumns"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :data="userData"
      >
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" @click="onSchedule(record.uid)">排班</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      title="排班设置"
      v-model="batchSetCalendar"
      :width="400"
      @ok="onSubmit"
    >
      <a-form-model
        ref="form"
        :rules="calendarRules"
        :model="calendarForm"
      >
        <a-form-model-item label="日期区间">
          <a-range-picker style="width: 100%" @change="onChange" />
        </a-form-model-item>
        <a-form-model-item label="工作状态" prop="event_type">
          <a-select v-model="calendarForm.event_type">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <user-calendar v-if="visible" :uid="uid" @cancel="onCancel"></user-calendar>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import UserCalendar from './components/UserCalendar'
import col from '@/columns/schedule'
import { getMemberList } from '@/api/member'
import { getAddSchedule, postAddSchedule } from '@/api/schedule'
const userColumns = col.userList
export default {
  components: {
    STable,
    UserCalendar
  },
  name: 'ScheduleUserList',
  data () {
    return {
      userColumns,
      userData: parameters => {
        return getMemberList(Object.assign(parameters, this.queryParam)).then(res => {
          this.adviserOpts = res.result.adviser_array
          return res.result
        })
      },
      adviserOpts: {},
      visible: false,
      queryParam: {},
      uid: '',
      selectedRowKeys: [],
      batchSetCalendar: false,
      calendarForm: {},
      calendarRules: {
        // event_date: [{ required: true, message: '请选择要设置的日期', trigger: 'change' }],
        event_type: [{ required: true, message: '必须选择当天工作状态', trigger: 'blur' }]
      },
      typeOpts: {},
      dateArray: []
    }
  },
  created () {
    this.queryParam['filter[type]'] = '1'
  },
  methods: {
    batchSet () {
      getAddSchedule().then(res => {
        if (res.status === 0) {
          this.typeOpts = res.result.type_opts
          this.batchSetCalendar = true
        }
      })
    },
    onSubmit () {
      const app = this
      app.$refs.form.validate(valid => {
        if (valid) {
          const form = {}
          const dateArray = []
          const startDate = app.dateArray[0].split('-')
          const endDate = app.dateArray[1].split('-')
          for (let i = startDate[2]; i <= endDate[2]; i++) {
            dateArray.push(startDate[0] + '-' + startDate[1] + '-' + i)
          }
          form['calendar[uid]'] = app.selectedRowKeys
          form['calendar[event_type]'] = app.calendarForm['event_type']
          form['calendar[event_date]'] = dateArray
          postAddSchedule(form).then(res => {
            if (res.status === 0) {
              app.batchSetCalendar = false
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onChange (date, dateString) {
      this.dateArray[0] = dateString[0]
      this.dateArray[1] = dateString[1]
    },
    onCancel (visible) {
      this.visible = visible
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    getBetweenDateStr (start, end) {
      const beginDay = start.split('-')
      const endDay = end.split('-')
      console.log(beginDay)
      console.log(endDay)
    },
    onSchedule (uid) {
      this.uid = uid
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
.red {
  background: #ff0;
}
</style>
